<mat-toolbar style="font-size: 14px; gap: 24px;">
	Drop here or select
	<input
		#inputFile
		(change)="inputChange($event)"
		accept="{{acceptedExt.join(', ')}}"
		hidden="true"
		multiple
		onclick="this.value=null"
		type="file"/>
	<button
		(click)="inputFile.click()"
		color="accent"
		mat-stroked-button
		style="width: 100%">
		{{ acceptedExt.join(' ') }}
	</button>
</mat-toolbar>

<div class="spaceBetweenCenter" style="flex-direction: column; padding: 0px 20px">

	<mat-card *ngFor="let file of files; let i = index">

		<mat-card-content style="min-width: 500px;">
			<div *ngIf="files[i].text.length > 20000000"
				 style="height: 100%; display: flex; justify-content: center; align-items: center;">
				Preview not available
			</div>

			<ngx-monaco-editor
				*ngIf="files[i].text.length < 20000000"
				[(ngModel)]="files[i].text"
				[options]="files[i].editorOptions">
			</ngx-monaco-editor>
		</mat-card-content>

		<mat-card-actions>
			<mat-form-field
				appearance="outline"
				style="width: 100%; margin-bottom: -1.25em">
				<mat-label>File name</mat-label>
				<input [(ngModel)]="file.name"
					   autocomplete="off"
					   matInput
					   required>
			</mat-form-field>

			<button
				(click)="arrayMove(files, i, i - 1)"
				[hidden]="i === 0"
				mat-button>
				<span class="material-symbols-outlined notranslate">
					arrow_upward
				</span>
				Import before
			</button>

			<button
				(click)="arrayMove(files, i, i + 1)"
				[hidden]="i === files.length -1"
				mat-button>
				<span class="material-symbols-outlined notranslate">
					arrow_downward
				</span>
				Import after
			</button>

			<button
				(click)="files.splice(i, 1)"
				mat-button>
				<span class="material-symbols-outlined notranslate">
					remove
				</span>
				Remove
			</button>
		</mat-card-actions>
	</mat-card>

	<mat-divider style="width: 100%; margin: 30px 0px 20px;"></mat-divider>

	<div style="display: flex; gap: 12px; align-items: center;">
		<button
			(click)="importFiles(database.value)"
			[disabled]="files.length < 1 || isLoading"
			color="accent"
			mat-raised-button
			style="width: 200px;">
			<span class="material-symbols-outlined notranslate">
				exit_to_app
			</span>
			Load into
		</button>

		<mat-spinner
			*ngIf="isLoading"
			[diameter]="30"
			color="accent"
		></mat-spinner>

		<mat-form-field style="margin-bottom: -1.25em">
			<input
				#database
				[value]="selectedDatabase.name"
				autocomplete="off"
				matInput
				required>
		</mat-form-field>
	</div>
</div>
